<template>
  <view class="app">
    <view class="line-wapper">
      <uni-forms
        ref="form"
        :modelValue="formData"
        :rules="rules"
        label-width="180rpx"
        label-align="center"
      >
        <uni-forms-item label="站点名称" name="name" required>
          <uni-easyinput
            type="text"
            v-model="formData.name"
            :styles="styles"
            placeholder="请输入站点名称"
          />
        </uni-forms-item>
        <uni-forms-item label="所在地区" name="area" required>
          <uni-easyinput
            type="text"
            v-model="formData.area"
            :styles="styles"
            placeholder="请输入所在地区"
            suffixIcon="right"
            @iconClick="showArea"
          />
        </uni-forms-item>
        <uni-forms-item label="联系人" name="user" required>
          <uni-easyinput
            type="text"
            v-model="formData.user"
            :styles="styles"
            placeholder="请输入联系人姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="phone" required>
          <uni-easyinput
            type="text"
            v-model="formData.phone"
            :styles="styles"
            placeholder="请输入手机号码"
          />
        </uni-forms-item>
        <uni-forms-item label="座机号码" name="tell" required>
          <uni-easyinput
            type="text"
            v-model="formData.tell"
            :styles="styles"
            placeholder="请输入座机号码"
          />
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="address" required>
          <uni-easyinput
            type="text"
            v-model="formData.address"
            :styles="styles"
            placeholder="请选择真实的经营地址"
            suffixIcon="location"
            @iconClick="showLocation"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <mix-button
      ref="confirmBtn"
      text="保存"
      :isConfirm="false"
      marginTop="40rpx"
      @onConfirm="onSave"
    ></mix-button>
  </view>
</template>

<script>
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput.vue';
export default {
  components: {
    uniEasyinput,
  },
  data() {
    return {
      styles: {
        color: '#999999',
      },
      // 表单数据
      formData: {
        name: '',
        area: '',
        user: '',
        phone: '',
        tell: '',
        address: '',
      },
      rules: {
        // 对name字段进行必填验证
        name: {
          rules: [
            {
              required: true,
              errorMessage: '请输入站点名称',
            },
            {
              minLength: 3,
              maxLength: 5,
              errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
            },
          ],
        },
        // 对area字段进行必填验证
        area: {
          rules: [
            {
              required: true,
              errorMessage: '请输入所在地区',
            },
          ],
        },
        // 对user字段进行必填验证
        user: {
          rules: [
            {
              required: true,
              errorMessage: '请输入联系人姓名',
            },
          ],
        },
        // 对phone字段进行必填验证
        phone: {
          rules: [
            {
              required: true,
              errorMessage: '请输入手机号码',
            },
          ],
        },
        // 对tell字段进行必填验证
        tell: {
          rules: [
            {
              required: true,
              errorMessage: '请输入座机号码',
            },
          ],
        },
        // 对address字段进行必填验证
        address: {
          rules: [
            {
              required: true,
              errorMessage: '请选择真实的经营地址',
            },
          ],
        },
      },
    };
  },
  onLoad() {},
  methods: {
    onSave() {
      this.$refs.form
        .validate()
        .then((res) => {
          console.log('表单数据信息：', res);
        })
        .catch((err) => {
          console.log('表单错误信息：', err);
        });
    },
    navBack() {
      uni.navigateBack();
    },
    showArea() {},
    showLocation() {},
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  margin-top: 20rpx;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f7f8f9;
}
.line-wapper {
  margin-top: 20rpx 0;
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
}
</style>
